<template>
	<view class="index colorSky">
		<musicHead title="Tonakyo Music" :icon="false"></musicHead>
		<view class="container">
			<scroll-view scroll-y="true">
				<!-- <view class="index-serch" @tap="handleToSerch()"></view> -->
				<view class="index-serch" @tap="handleToSerch()">
					<text class="iconfont icon-RectangleCopy"></text>
					<input v-model="serchKeyword" type="text" placeholder="搜索歌曲">
				</view>
				<view class="index-list">
					<view class="list-title">推荐榜单</view>
					<view class="index-item" v-for="(item,index) in topList" :key="index" @tap="handleToList(item.listId)">
						<view class="index-item-img">
							<text>{{item.updateFrequency}}</text>
							<img :src="item.coverImgUrl" alt="">
						</view>
						<view class="index-item-text">
							<view v-for="(item,index) in item.tracks" :key="index">{{index+1}}.{{item.first}}--{{item.second}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musicHead from "@/components/musicHead/musicHead.vue"
	import { topList } from "@/common/api.js"
	export default {
		data() {
			return {
				topList:[],
				serchKeyword : "",
				showSongList : [],
				serchSongList : []
			}
		},
		components : {
			musicHead
		},
		//页面加载完触发
		onLoad() {
			topList().then(res =>{
				this.topList = res
				console.log(res);
			})
		},
		methods: {
			//搜索音乐
			serchMusicApi(){
				
			},
			//点击到音乐列表
			handleToList(listId){
				uni.navigateTo({
					url:`/pages/list/list?listId=${listId}`,
				})
			},
			handleToSerch(){
				uni.navigateTo({
					url:`/pages/serch/serch`,
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.index{}
	.index-serch{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 70rpx 30rpx 30rpx 30rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
	}
	.index-serch text{
		font-size: 26rpx;
		margin: 0 26rpx;
	}
	.index-serch input{
		font-size: 28rpx;
		flex: 1;
	}
	.index-list{
		font-size: 20rpx;
		margin: 0 30rpx;
		.list-title{
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			padding-left: 20rpx;
			font-size: 32rpx;
			margin-bottom: 40rpx;
		}
		.index-item{
			display: flex;
			margin-bottom: 34rpx;
			.index-item-img{
				width: 160rpx;
				height: 160rpx;
				color: white;
				position: relative;
				border-radius: 30rpx;
				overflow: hidden;
				object-fit: cover;
				text{
					position: absolute;
					bottom: 20rpx;
					left: 10rpx;
				}
				img{
					width: 100%;
					height: 100%;
				}
			}
			.index-item-text{
				flex: 1;
				margin-left: 20rpx;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
			}
		}
	}
</style>
